<template>
    <div class="article-page">
        <!-- 
            v-for渲染页面
            点击跳转并传输id,
         -->
        <div
            class="article-item"
            v-for="item in articles"
            :key="item.id"
            @click="$router.push(`/detail/${item.id}`)"
        >
            <div class="head">
                <img :src="item.creatorAvatar" alt="" />
                <div class="con">
                    <p class="title">{{ item.stem }}</p>
                    <p class="other">
                        {{ item.creatorName }} | {{ item.createdAt }}
                    </p>
                </div>
            </div>
            <div class="body">
                {{ item.content }}
            </div>
            <div class="foot">
                点赞 {{ item.likeCount }} | 浏览 {{ item.views }}
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'ArticlePage',
    async created() {
        // 数据初始化完成发送ajax获取数据, 并赋值给articles
        const res = await this.$axios({
            url: 'https://mock.boxuegu.com/mock/3083/articles',
        })
        console.log(res)
        this.articles = res.data.result.rows
    },
    data() {
        return {
            articles: [],
        }
    },
}
</script>
<style lang="less" scoped>
.article-page {
    background: #f5f5f5;
}
.article-item {
    margin-bottom: 10px;
    background: #fff;
    padding: 10px 15px;
    .head {
        display: flex;
        img {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            overflow: hidden;
        }
        .con {
            flex: 1;
            overflow: hidden;
            padding-left: 15px;
            p {
                margin: 0;
                line-height: 1.5;
                &.title {
                    text-overflow: ellipsis;
                    overflow: hidden;
                    width: 100%;
                    white-space: nowrap;
                }
                &.other {
                    font-size: 10px;
                    color: #999;
                }
            }
        }
    }
    .body {
        font-size: 14px;
        color: #666;
        line-height: 1.6;
        margin-top: 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    .foot {
        font-size: 12px;
        color: #999;
        margin-top: 10px;
    }
}
</style>
